<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <title>23201012827 魏巍</title>
  <script src="font/iconfont.js"></script>
  <script src="font_d42l8r0ck9c/iconfont.js"></script>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        /* 订单选项 */
        .tab{
            width: 100%;
            height: 100%;
        }
        .tab h4{
            border: 1px solid #ccc;
            width: 50px;
        }
        .title{
            height: 60px;
            line-height: 40px;
            border-bottom:1px solid rgb(84, 83, 83);
            font-size: 18px;
            display: flex;
        }
        .title span{
            width: 100%;
            text-align:center;
            letter-spacing: 8px;
        }
        .title .cur{
            border-left: 1px solid #000;
            border-top: 1px solid #ccc;
            border-right: 1px solid #000;
            background-color: #fff;
            margin-bottom:  -1px;
            color: rgb(230, 168, 232);
            font-weight: bold;
        }
        .tc{
            height: 90%;
            border: 0;
            border-top: none;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            display: none;
        }
        .show{
            display: block;
        }
/* 下导航 */
.icon {
           width: 1em;
           height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .bnav{
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: #fff;
            z-index: 9;
            width: 100%;
        }
        .body{
            margin-bottom: 50px;
        }
        .bnav>ul{
            display: flex;
        }
        .bnav li{
            width: 20%;
            text-align: center;
        }
        .icon{
            font-size: 36px;
            margin: 5px 0;
        }

    </style>
</head>
<body>
    <!-- 订单选项 -->
    <div class="tab">
        <a href=""><h4>开发票</h4></a>
        <div class="title">
            <span>茶饮鲜食</span>
            <span class="cur">喜茶百货</span>
        </div>
        <div class="tc" show>暂无更多订单<br><a href="./diandan.html" style="color: rgb(175, 194, 228);">前往选购</a></div>
        <div class="tc">暂无选购</div>
    </div>

<!-- 下导航 -->
<bav class="bnav" style="background-color: #fff;">
    <ul>
        <li>
            <a href="./index.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shouye"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./diandan.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-yinpinbanjia"></use>
                </svg>
                <p>点单</p>
            </a>
        </li>
        <li>
            <a href="./baihuo.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dingdan"></use>
                </svg>
                <p>百货</p>
            </a>
        </li>
        <li>
            <a href="./dingdan.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dingdan1"></use>
                </svg>
                <p>订单</p>
            </a>
        </li>
        <li>
            <a href="./huiyuan.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-chengyuan"></use>
                </svg>
                <p>我的</p>
            </a>
        </li>
  </ul>
  </bav>



    <!-- 订单选项 -->
    <script>
        var tab=document.getElementsByClassName("tab")[0];
         /*    var tt=tab.getElementsByClassName("title");*/
        var tt=tab.querySelector(".title");
        var span=tt.querySelectorAll("span");
        var tc=tab.querySelectorAll(".tc");
        console.log(tab,tt,span,tc);

        for(var i=0;i<span.length;i++){
            span[i].index=i;
             /* index是自定义属性，可以改成其他名字，增加数据结构 */
            /* 功能：点哪里 另一个变 */
            span[i].onmouseover=function(){
                for(var j=0;j<tc.length;j++){
                    tc[j].style.display="none";
                    span[j].classList.remove("cur");

                }
                tc[this.index].style.display="block";
                span[this.index].classList.add("cur");
            }
        }
    </script>
</body>
</html>